<template>
  <div class="equipment-bottom-left">
    <div class="equipment-title">成品统计</div>
    <div class="equipment-bottom-left-content">
      <div class="bottom-left-count">
        <span class="bottom-left-count-title">计划数量</span>
        <span class="bottom-left-count-number">{{
          progressData?.planNumber || 0
        }}</span>
      </div>
      <div ref="progressRef" id="progress"></div>
      <div class="bottom-left-count">
        <span class="bottom-left-count-title">实际完成</span>
        <span class="bottom-left-count-number">{{
          progressData?.currentNumber || 0
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
// import { getProductData } from "@/api/large-screen";
import { getResize } from "@/utils/index.ts";
import * as echarts from "echarts";

// ref
const progressRef = ref(null);

const route = useRoute();
const equipmentId = ref(route?.query?.id);

const progressData = ref({});
const onProgress = async () => {
  const myChart =
    echarts.getInstanceByDom(progressRef.value) ||
    echarts.init(progressRef.value);
  //   const res = await getProductData({ equipmentId: equipmentId.value });
  //   progressData.value = res || {};
  //   let progress = res?.progress || 0;
  progressData.value = {
    planNumber: 100,
    currentNumber: 80,
    progress: 0.8,
  };
  let progress = progressData.value?.progress || 0;

  let name = "进度";
  const option = {
    series: [
      {
        name: "外层圈线",
        type: "gauge",
        radius: "100%",
        center: ["50%", "55%"],
        splitNumber: 1,
        splitLine: {
          show: false,
          distance: 0,
          length: 4,
          lineStyle: {
            color: "#fff", //用颜色渐变函数不起作用
            width: 1,
          },
        },
        axisLine: {
          lineStyle: {
            color: [
              [0.6, "#eee"],
              [1, "#eee"],
            ],
            width: 1.5,
          },
        }, //仪表盘轴线
        axisLabel: {
          show: false,
        }, //刻度标签。
        axisTick: {
          show: false,
        },
        itemStyle: {
          color: "#fff",
        },
        title: {
          show: false,
        },
        pointer: {
          show: false,
          length: "70%",
          radius: "20%",
          width: 3, //指针粗细
        },
        animationDuration: 4000,
        z: 9,
        detail: {
          // 仪表盘详情
          valueAnimation: true,
          formatter: ["{name|" + name + "}"].join("\n"),
          show: true,
          color: "white",
          offsetCenter: [0, "65%"],
          rich: {
            name: {
              fontFamily: "Microsoft YaHei",
              fontSize: 18,
              color: "#fff",
            },
          },
        },
        data: [
          {
            value: (progressData.value?.progress || 0) * 100,
          },
        ],
      },
      {
        name: "饼图",
        type: "pie",
        radius: ["70%", "90%"],
        center: ["50%", "55%"],
        startAngle: 225,
        emphasis: {
          disabled: true,
        },
        //数据和单位
        label: {
          show: true,
          position: "center",
          formatter: function (params) {
            return `${progress.toFixed(1)}%`;
          },
          color: "#fff",
          fontSize: 30,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            name: "外圈",
            value: progress,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(0, 247, 247, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(3, 129, 244, 1)",
                },
              ]),
            },
          },
          {
            name: "内围阴影",
            value: 100 - progress,
            itemStyle: {
              color: "#183a57",
            },
          },
          {
            name: "底部占位",
            value: 33,
            itemStyle: {
              color: "transparent",
            },
          },
        ],
      },
    ],
  };
  getResize(option, myChart);
};

watch(route, (newVal) => {
  equipmentId.value = newVal?.query?.id;
  onProgress();
});

onMounted(() => {
  onProgress();
});
</script>

<style lang="scss" scoped>
$height: 410px;
$height-content: 150px;

#progress {
  width: calc($height-content * 1.5);
  height: calc(($height - 60px) / 2);
}

.equipment-bottom-left {
  .equipment-bottom-left-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc($height - 50px);
    padding: 20px;

    .bottom-left-count {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: $height-content;
      height: $height-content;
      background: url("@/assets/images/large-screen/equipment/bg.png") no-repeat;
      background-position: center;
      background-size: 100% 100%;
      .bottom-left-count-title {
        font-size: 14px;
        font-weight: 300;
        color: #fff;
      }
      .bottom-left-count-number {
        font-size: 28px;
        font-weight: 500;
        color: #fff;
      }
    }
  }
}
</style>
